<template>
    <view>
        <tabs :is-scroll="false" @change="tabsChange">
            <tab
                v-for="(value, key, index) in tabsNameList"
                :key="index"
                :name="`${value.name}(${value.count})`"
            >
            </tab>
        </tabs>

        <view class="scrollView">
            <z-paging
                ref="paging"
                v-model="couponList"
                @query="queryList"
                height="100%"
                :fixed="false"
            >
                <view
                    class="px-[30rpx] my-[15rpx]"
                    v-for="(item, index) in couponList"
                    :key="index"
                >
                    <couponCard
                        :type="1"
                        :coupon-data="item"
                        :disabled="tabsSelect != 0"
                        :isPageMC="true"
                    ></couponCard>
                </view>
            </z-paging>
        </view>
    </view>
</template>
<script setup lang="ts">
import tabs from '@/components/tabs/tabs.vue'
import tab from '@/components/tab/tab.vue'
import couponCard from '@/components/coupon-card/index.vue'
import { apiMyCoupon, apiStatusCount } from '@/api/coupon'
import { nextTick, ref, shallowRef } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

//优惠券列表
const couponList = ref<any[]>([])

//tabs当前选中项
const tabsSelect = ref(0)

//下拉组件ref
const paging: any = ref(null)

const tabsNameList: any = ref({
    unused_count: { name: '可使用', count: 0, type: 0 },
    used_count: { name: '已使用', count: 0, type: 1 },
    expired_count: { name: '已过期', count: 0, type: 2 }
})

//tabs切换
const tabsChange = async (index: any) => {
    tabsSelect.value = index
    await nextTick()
    paging.value.reload()
}
//下拉组件
const queryList = async (pageNo: any, pageSize: any) => {
    try {
        const { lists } = await apiMyCoupon({ pageNo, pageSize, status: tabsSelect.value })
        paging.value.complete(lists)
    } catch (error) {
        paging.value.complete(false)
    }
}

//获取不同状态数量
const getStatusCount = async () => {
    const res = await apiStatusCount()
    for (const key in tabsNameList.value) {
        tabsNameList.value[key].count = res[key]
    }
}

onLoad(() => {
    getStatusCount()
})
</script>
<style lang="scss" scoped>
.scrollView {
    height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
}
</style>
